<template>
  <el-aside :width="sidebarWidth" class="sidebar" :style="{ display: collapsed ? 'none' : 'block' }">
    <el-menu
        :default-active="$route.path"
        background-color="#2f3542"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
        :collapse="collapsed"
        class="el-menu-sidebar"
    >
      <el-menu-item index="/user">
        <i class="el-icon-user"></i>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="/role">
        <i class="el-icon-user"></i>
        <span>角色管理</span>
      </el-menu-item>
      <el-menu-item index="/department">
        <i class="el-icon-office-building"></i>
        <span>部门管理</span>
      </el-menu-item>
      <el-menu-item index="/permission">
        <i class="el-icon-lock"></i>
        <span>权限管理</span>
      </el-menu-item>
      <el-menu-item index="/log">
        <i class="el-icon-notebook-1"></i>
        <span>日志管理</span>
      </el-menu-item>
      <!-- 新增系统管理菜单项 -->
      <el-menu-item index="/system">
        <i class="el-icon-setting"></i>
        <span>系统管理</span>
      </el-menu-item>
      <el-menu-item index="/map">
        <i class="el-icon-setting"></i>
        <span>地图</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>


<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMenu, ElMenuItem, ElAside, ElButton } from 'element-plus'

const collapsed = ref(false)  // 控制侧边栏是否折叠
const sidebarWidth = ref(collapsed.value ? '60px' : '250px')  // 根据折叠状态调整宽度

// 切换侧边栏显示/隐藏
const toggleSidebar = () => {
  collapsed.value = !collapsed.value
  sidebarWidth.value = collapsed.value ? '60px' : '250px'
}
</script>

<style scoped>
.sidebar {
  background-color: #333;
  height: 100vh;
  color: #fff;
  transition: all 0.3s ease; /* 侧边栏过渡效果 */
}

.el-menu {
  width: 100%;
}

.el-menu-sidebar {
  padding-top: 30px; /* 为菜单增加顶部间距 */
}

.toggle-btn {
  position: absolute;
  top: 20px;
  left: 260px;
  z-index: 100;
}
</style>
